<!--
 * @Author: xiaobaobeibai 604070135@qq.com
 * @Date: 2021-06-15 11:09:50
 * @LastEditors: smallWhite
 * @LastEditTime: 2024-03-16 19:14:09
 * @FilePath: /huizhou_website/src/views/home/index.vue
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
<template>
  <div class="index_box">
    <div>
      <headerVue></headerVue>
      <div
        class="banner_box_index"
        :style="isPhone == 'true'?'padding-top:70px':'padding-top: 115px;'">
        <!-- <img :src="bannerUrl"
          style="width:100%;"> -->
        <el-carousel
          :height="isPhone == 'false' ? '600px': '200px'"
          arrow="always">
          <el-carousel-item
            v-for="item in bannerUrlList"
            :key="item.id">
            <img
              :src="item.imgUrl"
              style="width:100%;height: 600px;">
          </el-carousel-item>
        </el-carousel>
        <div
          class="banner_text">
          <!-- <img
            src="../../assets/imgaes/banner_text_03.png"
            style="width:55%"> -->
        </div>
      </div>

    </div>
    <div class="bg-img"
      style="padding:20px 0 0;position: relative;">
      <el-card class="card"
        shadow="never">
        <el-row :gutter="20">
          <el-col :lg="12"
            :md="12" :sm="24"
            v-if="isPhone === 'false'">
            <el-carousel
              height="360px"
              v-loading="loadingImg"
              arrow="nerver"
              direction="vertical">
              <el-carousel-item
                v-for="item in newsListImg"
                :key="item.id">
                <img
                  :src="item.imgUrl"
                  style="width:100%;height:100%">
                <div
                  class="news_footer">
                  {{item.title}}
                </div>
                <div
                  class="lunbo"
                  @click="gotoNews(item)">
                </div>
              </el-carousel-item>
            </el-carousel>
          </el-col>
          <el-col :lg="12"
            :md="12" :sm="24"
            v-else>
            <el-carousel
              height="220px"
              v-loading="loadingImg"
              arrow="nerver"
              direction="vertical">
              <el-carousel-item
                v-for="item in newsListImg"
                :key="item.id">
                <img
                  :src="item.imgUrl"
                  style="width:100%;height:100%">
                <div
                  class="news_footer">
                  {{item.title}}
                </div>
                <div
                  class="lunbo"
                  @click="gotoNews(item)">
                </div>
              </el-carousel-item>
            </el-carousel>
          </el-col>
          <el-col :lg="12"
            :md="12" :sm="24"
            v-if="isPhone === 'false'">
            <div
              class="news_nav">
              <div
                class="news_nav_left">
                <div
                  class="news_nav_item"
                  @click="changeNavs(index)"
                  :class="{active:isActive === index}"
                  v-for="(item,index) in news_navs"
                  :key="index">
                  {{item.name}}
                </div>
              </div>
              <div
                class="news_nav_right">
                <span
                  @click="gotoNewList(isActive)">更多>></span>
              </div>
            </div>
            <div
              class="nav_body"
              v-loading="loadingB">
              <div
                class="nav_item"
                @click="gotoNewes(item,isActive)"
                v-for="(item,index) in newsList"
                :key="index">
                <div
                  class="nav_item_left">
                  <div
                    class="icon">
                    <i class="el-icon-s-opportunity"
                      style="color:#3976d2"></i>
                  </div>
                  <div
                    class="news_title">
                    {{item.title}}
                  </div>
                </div>
                <div
                  class="nav_item_right">
                  <span>{{item.time.substring(0,11)}}</span>
                </div>
              </div>
            </div>
          </el-col>
          <el-col :lg="12"
            :md="12" :sm="24"
            style="margin-top:20px"
            v-else>
            <div
              class="news_nav">
              <div
                class="news_nav_left">
                <div
                  class="news_nav_item"
                  style="padding:0 0px;"
                  @click="changeNavs(index)"
                  :class="{active:isActive === index}"
                  v-for="(item,index) in news_navs"
                  :key="index">
                  {{item.name}}
                </div>
              </div>
            </div>
            <div
              class="nav_body"
              v-loading="loadingB">
              <div
                class="nav_item"
                @click="gotoNewes(item,isActive)"
                v-for="(item,index) in newsList"
                :key="index">
                <div
                  class="nav_item_left">
                  <div
                    class="icon">
                    <i class="el-icon-s-opportunity"
                      style="color:#3976d2"></i>
                  </div>
                  <div
                    class="news_title">
                    {{item.title}}
                  </div>
                </div>
                <div
                  class="nav_item_right">
                  <span>{{item.time.substring(0,11)}}</span>
                </div>
              </div>
            </div>
          </el-col>
        </el-row>
      </el-card>
      <el-card class="card"
        shadow="never"
        style="margin:20px auto">
        <el-row :gutter="20">
          <el-col :lg="24"
            :md="24" :sm="24">
            <div
              class="news_nav">
              <div
                class="news_nav_left">
                <div
                  class="news_nav_item"
                  @click="changeNavss(item,index)"
                  :class="{active:isActivePath === index}"
                  v-for="(item,index) in news_navss"
                  :key="index">
                  {{item.name}}
                </div>
              </div>
            </div>
            <div
              style="max-height: 400px;min-height: 300px;padding: 20px;">
              <div
                class="line_10"
                v-html="companyProfile.concat">
              </div>
              <div
                class="btn_box"
                @click="gotoPages()">
                查看详情>> </div>
            </div>
          </el-col>
        </el-row>
      </el-card>
      <div class="blue_box">
        <div
          class="blue_1200">
          <div
            class="card_header">
            <div
              class="card_title">
              业务板块
            </div>
            <div
              class="card_more">
              <span
                @click="gotoProject(4,0)">更多>></span>
            </div>
          </div>

          <div
            class="project_boxs"
            v-loading="loadingC"
            v-if="isPhone !=='true'">
            <el-carousel
              height="220px"
              indicator-position="outside"
              v-loading="loadingC"
              :interval="3000"
              arrow="always">
              <el-carousel-item
                v-for="item in projectList"
                :key="item.id">
                <el-row
                  :gutter="20">
                  <el-col
                    :md="8"
                    v-for="(k,s) in item"
                    :key="s">
                    <div
                      class="item_boxes">
                      <img
                        :src="k.imgUrl">
                      <div
                        class="item_footer">
                        {{k.name}}
                      </div>
                    </div>
                  </el-col>
                </el-row>
              </el-carousel-item>
            </el-carousel>
          </div>
          <div
            class="project_boxs"
            v-loading="loadingC"
            v-if="isPhone ==='true'">
            <el-carousel
              height="220px"
              indicator-position="outside"
              v-loading="loadingC"
              arrow="always">
              <el-carousel-item
                v-for="item in projectList"
                :key="item.id">
                <div
                  class="item_boxes">
                  <img
                    :src="item.imgUrl">
                  <div
                    class="item_footer">
                    {{item.name}}
                  </div>
                </div>
              </el-carousel-item>
            </el-carousel>
          </div>
        </div>
      </div>
    </div>

    <Footer></Footer>
    <BackTop></BackTop>
  </div>

</template>

<script>
import headerVue from '../../components/header_index.vue'
import Footer from '../../components/footer'
import BackTop from '../../components/back_top'
import axios from 'axios'

export default {
  components: { headerVue, Footer, BackTop },
  data() {
    return {
      companyProfile: {},
      bannerUrl: '',
      bannerUrlList: [],
      scrollTop: 0,
      isActivePath: 0,
      loadingImg: false,
      loadingA: false,
      loadingB: false,
      loadingC: false,
      loadingVideo: false,
      loadingF: false,
      loadingaaa: false,
      newsUrl: '',
      isPhone: 'false',
      isActive: 0,
      projectWidth: '',
      newsListImg: [],
      newsList: [],
      projectList: [],
      projectId: '',
      news_navs: [{ name: '基层动态' }, { name: '党的建设' }],
      news_navss: []
    }
  },
  mounted() {
    // setTimeout(() => {
    // console.log(this.$store.state.navList[4].id, '000')
    this.projectParentId = this.$store.state.navList[3].id
    if (window.localStorage.getItem('isPhone')) this.isPhone = window.localStorage.getItem('isPhone')
    else this.isPhone = 'false'
    this.getNewsImg()
    this.getNews()
    this.getProject()
    this.getHtmlBodyHeight()
    this.getBanner()
    this.getTextList(0)
    // }, 1000)
  },
  methods: {
    getTextList(isActivePath) {
      axios.post('/company/profile/selectOne', { projectId: this.$store.state.navList[1].id }).then(res => {
        this.companyProfile = res.data.data.companyProfile.filter(item => {
          if (item.type === isActivePath + 1) {
            return item.type === isActivePath + 1
          }
        })[0]
        console.log(this.companyProfile, 'this.companyProfile')
      })
    },
    getBanner() {
      axios.post('/home/img', { projectId: this.$store.state.navList[0].id }).then(res => {
        const bannerList = res.data.data.imageList
        bannerList.map(item => {
          this.$set(item, 'imgUrl', res.data.data.imgUrl + '/' + item.url)
        })
        this.bannerUrlList = bannerList
        // this.bannerUrl = bannerList[0].imgUrl
      })
      this.news_navss = this.$store.state.navList[1].children
      console.log(this.news_navss, '098765')
    },
    getProject() {
      this.loadingC = true
      this.projectList = []
      axios
        .post('/home/engineering/case', {
          projectParentId: this.projectParentId,
          pageNum: 1,
          pageSize: 20
        })
        .then(res => {
          const resourcesDtoList = res.data.data.resourcesDtoList
          resourcesDtoList.map(item => this.$set(item, 'imgUrl', res.data.data.imgUrl + '/' + item.url))
          if (this.isPhone !== 'true') {
            if (resourcesDtoList.length > 9) {
              const arr0 = resourcesDtoList.slice(0, 3)
              const arr1 = resourcesDtoList.slice(3, 6)
              const arr2 = resourcesDtoList.slice(6, 9)
              const arr3 = resourcesDtoList.slice(9, 12)
              const arr4 = resourcesDtoList.slice(12, 15)
              this.projectList.push(arr0, arr1, arr2, arr3, arr4)
            } else {
              if (resourcesDtoList.length < 6) {
                this.projectList.push(resourcesDtoList)
                console.log(this.projectList, '9292828290')
              } else {
                const b0 = resourcesDtoList.slice(0, 3)
                const b1 = resourcesDtoList.slice(3, 6)
                this.projectList.push(b0, b1)
              }
            }
          } else {
            resourcesDtoList.map(item => this.$set(item, 'imgUrl', res.data.data.imgUrl + '/' + item.url))
            this.projectList = resourcesDtoList
          }

          this.loadingC = false
        })
    },
    gotoProject(i, j) {
      this.$store.commit('setOpenNav', [i, j])
      this.$router.push({
        path: '/project_index'
      })
      this.$store.commit('setPathIndex', '/project_index')
    },
    gotoPages() {
      if (this.isActivePath == 0) {
        this.$router.push({ path: '/company_profile' })
        this.$store.commit('setPathIndex', '/company_profile')
      } else if (this.isActivePath == 1) {
        this.$router.push({ path: '/organizational' })
        this.$store.commit('setPathIndex', '/organizational')
      } else if (this.isActivePath == 2) {
        this.$router.push({ path: '/department' })
        this.$store.commit('setPathIndex', '/department')
      } else if (this.isActivePath == 3) {
        this.$router.push({ path: '/leaderjob' })
        this.$store.commit('setPathIndex', '/leaderjob')
      }
    },
    getNewsImg() {
      this.loadingImg = true
      axios.post('/home/newNews', { pageNum: 1, pageSize: 3, type: 1 }).then(res => {
        this.newsListImg = res.data.data.newsList
        this.newsListImg.map(item => {
          this.$set(item, 'imgUrl', res.data.data.imgUrl + '/' + item.url)
        })
        this.loadingImg = false
      })
    },
    getNews() {
      this.loadingB = true
      axios.post('/home/newNews', { pageNum: 1, pageSize: 8, type: 2 }).then(res => {
        this.newsList = res.data.data.newsList
        this.newsList.map(item => {
          this.$set(item, 'imgUrl', res.data.data.imgUrl + '/' + item.url)
        })
        this.loadingB = false
      })
    },
    getNewsA() {
      this.loadingaaa = true
      axios.post('/home/newNews', { pageNum: 1, pageSize: 8, type: 4 }).then(res => {
        this.newsList = res.data.data.newsList
        this.newsList.map(item => {
          this.$set(item, 'imgUrl', res.data.data.imgUrl + '/' + item.url)
        })
        this.loadingaaa = false
      })
    },
    getNewsB() {
      this.loadingB = true
      axios
        .post('/home/engineering/case', {
          pageNum: 1,
          projectId: '6718156750056329216',
          pageSize: 8
        })
        .then(res => {
          this.newsList = res.data.data.resourcesDtoList
          this.newsList.map(item => {
            this.$set(item, 'imgUrl', res.data.data.imgUrl + '/' + item.url)
            this.$set(item, 'time', item.createTime)
            this.$set(item, 'title', item.name)
          })
          if (this.newsList.length > 8) {
            this.newsList.splice(8, this.newsList.length)
          }
          this.loadingB = false
        })
    },
    gotoNews(item) {
      this.$store.commit('setOpenNav', [6, item.type - 1])
      this.$router.push({
        path: '/news_details',
        query: {
          id: item.id
        }
      })
      this.$store.commit('setPathIndex', '/news_details')
    },

    gotoNewes(e, i) {
      if (i === 2) {
        this.$store.commit('setOpenNav', [7, 2])
        this.$router.push({
          path: '/team_building_details',
          query: {
            item: JSON.stringify(e)
          }
        })
      } else {
        this.gotoNews(e)
      }
    },
    gotoNewList(index) {
      if (index == 0) {
        this.$router.push({
          path: '/industry_news'
        })
        this.$store.commit('setPathIndex', '/industry_news')
      } else {
        this.$router.push({
          path: '/party_building'
        })
        this.$store.commit('setPathIndex', '/party_building')
      }
    },
    gotoOtherPage(e) {
      window.open(e.introduction)
    },
    changeNavss(item, index) {
      this.isActivePath = index
      this.getTextList(index)
    },
    changeNavs(index) {
      this.newsList = []
      this.isActive = index
      if (index === 0) {
        this.getNews()
      } else if (index === 1) {
        this.getNewsA()
      } else if (index === 2) {
        this.getNewsB()
      }
    },
    getHtmlBodyHeight() {
      //获取滚动时的高度
      this.scrollTop = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop
      if (this.scrollTop > 0) {
        this.goTop()
        this.scrollTop = 0
      }
    },
    goTop() {
      var timer = null
      cancelAnimationFrame(timer)
      timer = requestAnimationFrame(function fn() {
        var oTop = document.body.scrollTop || document.documentElement.scrollTop
        if (oTop > 0) {
          document.body.scrollTop = document.documentElement.scrollTop = oTop - 50
          timer = requestAnimationFrame(fn)
        } else {
          cancelAnimationFrame(timer)
        }
      })
    }
  }
}
</script>

<style scoped>
.banner_box_index {
  width: 100%;
  position: relative;
}
.banner_text {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  display: flex;
  justify-content: center;
  align-items: center;
}
.card {
  max-width: 1200px;
  margin: 0px auto;
}
.news_footer {
  position: absolute;
  bottom: 0;
  width: 100%;
  height: 60px;
  line-height: 60px;
  padding-left: 30px;
  background: rgba(0, 92, 199, 0.5);
  color: #fff;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: normal;
}
.lunbo {
  position: absolute;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0);
  top: 0;
  left: 0;
  cursor: pointer;
}
.news_nav {
  display: flex;
  justify-content: space-between;
  align-items: center;
  overflow-x: auto;
}
.news_nav .news_nav_left {
  display: flex;
  flex-grow: 1;
}
.news_nav_right {
  color: #999999;
}
.news_nav_right:hover {
  color: #3976d2;
  cursor: pointer;
}
.news_nav .news_nav_left .news_nav_item {
  margin: 0 20px;
  line-height: 30px;
  border-bottom: 2px solid white;
  cursor: pointer;
  padding: 0 10px;
  width: 65px;
}
.news_nav .news_nav_left .news_nav_item.active {
  color: #3976d2;
  font-weight: 500;
  border-bottom: 2px solid #3976d2;
}
.nav_body {
  margin-top: 10px;
  min-height: 212px;
}
.nav_body .nav_item {
  padding: 10px;
  display: flex;
  justify-content: space-between;
}
.nav_body .nav_item:hover {
  color: #3976d2;
  cursor: pointer;
}
.nav_item_left {
  display: flex;
  width: calc(100% - 110px);
}
.nav_item_left .icon i {
  color: #999999;
  font-size: 18px;
  margin-right: 10px;
}
.nav_item_left .news_title {
  overflow: hidden;
  height: 20px;
  line-height: 20px;
  text-overflow: ellipsis;
  white-space: normal;
}
.card_header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.card_header .card_title {
  font-size: 17px;
  line-height: 36px;
  padding: 0 5px;
  border-bottom: 2px solid #e6e6e6;
}
.card_header .card_more {
  color: #999999;
  cursor: pointer;
}

.card_header .card_more:hover {
  color: #3976d2;
  cursor: pointer;
}
.blue_box {
  background: #3976d2;
  padding: 20px 0;
}
.blue_box .blue_1200 {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 20px;
  min-height: 220px;
  overflow: hidden;
}
.project_boxs .proe_access {
  width: 30px;
  height: 220px;
  background: rgba(0, 0, 0, 0.2);
  color: #fff;
  position: absolute;
  left: 0;
  line-height: 220px;
  text-align: center;
  top: 0;
  z-index: 99;
}
.project_boxs .next_access {
  width: 30px;
  height: 220px;
  background: rgba(0, 0, 0, 0.2);
  color: #fff;
  position: absolute;
  right: 0;
  line-height: 220px;
  text-align: center;
  top: 0;
  z-index: 99;
}
.project_boxs {
  position: relative;
  margin-top: 20px;
  overflow-y: hidden;
  height: 220px;
}
.blue_1200 .card_header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.blue_1200 .card_header .card_title {
  color: #fff;
}
.blue_1200 .card_header .card_more {
  color: #f1f1f1 !important;
}
.project_boxs .item_boxes {
  background: #fff;
  padding: 10px;
  position: relative;
}
.project_boxs .item_boxes img {
  height: 200px;
  width: 100%;
}
.project_boxs .item_boxes .item_footer {
  position: absolute;
  bottom: 10px;
  left: 10px;
  right: 10px;
  height: 40px;
  background: rgba(0, 0, 0, 0.2);
  line-height: 40px;
  color: #fff;
  padding-left: 20px;
}
.line_10 {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  width: 100%;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 10;
  height: 225px;
}
.btn_box {
  width: 120px;
  height: 40px;
  border-radius: 5px;
  border: 1px solid #3976d2;
  text-align: center;
  line-height: 40px;
  margin: 30px auto 0;
  cursor: pointer;
  color: #3976d2;
  transition: all 0.3s ease;
}
.btn_box:hover {
  background: #3976d2;
  color: #ffffff;
}
</style>